<!--
 * @Author: Aaron
 * @Date: 2022-05-06 09:56:48
 * @LastEditors: Aaron
 * @LastEditTime: 2022-05-13 16:52:31
 * @Description: file content
 * @FilePath: \ias_ui\src\views\JDSupermarket\components\offerHeader.vue
 * @Company: 沃尔玛
-->
<template>
  <div class="pageHeader">
    <div class="offer-header">
      <div class="expor-btn">
        <el-upload class="avatar-uploader" action="#" accept=".xls,.xlsx" :auto-upload="false" :show-file-list="false" :on-change="handleOnChange">
          <el-button size="mini" type="text">导入需新增/更新的文件</el-button>
        </el-upload>
        <el-button type="primary" size="mini" class="inspect-btn" :disabled="!Boolean(id)" @click="handleCheck"> 检 查 </el-button>
        <el-button
          type="primary"
          size="mini"
          :disabled="!Boolean(id) || checkStatus !== enumerationStatus.VERIFICATIONSUCCEESSFUL"
          @click="handleDetermineOffer"
        >
          确认导入报价
        </el-button>
      </div>
      <div class="download-btn">
        <el-button size="mini" type="text" @click="download">下载模板</el-button>
      </div>
    </div>

    <div class="retrieval">
      <div class="search-item">
        <el-form class="searchform" :inline="true" size="mini" label-width="auto">
          <el-form-item label="校验状态">
            <el-select
              v-model="searchData.checkStatus"
              :disabled="!Boolean(id)"
              style="width: 200px"
              placeholder="请选择校验状态"
              collapse-tags
              clearable
              @change="handleSearch"
            >
              <el-option v-for="option in verifyStatus" :key="option.value" :label="option.label" :value="option.value" />
            </el-select>
          </el-form-item>
          <el-form-item>
            <i class="el-icon-refresh" title="点击刷新列表数据" @click="handleSearch" />
          </el-form-item>
        </el-form>
      </div>

      <div class="text-prompt">
        注意：<br>
        1:如果商品之前再门店已报过价，将以本次新报价覆盖之前的报价<br>
        2：报价区域解析原理，例如：填了全国，但京超上仅开了1059、3404、3400店，但商品不发送3400店，解析后报价仅对1059和3404有效
      </div>
    </div>
  </div>
</template>

<script>
import bus from '@/utils/eventBus.js'
import { verifyStatus, enumerationStatus } from '../js/dictionary.js'
import { offerTemplanteExport, uploadExcel, verification, determineOffer } from '@/api/JDSupermarket/productsList.js'

export default {
  name: 'OfferHeader',
  props: {
    searchData: {
      type: Object,
      default() {
        return {}
      }
    },
    id: {
      type: [Number, null],
      default: null
    },
    checkStatus: {
      type: [Number, null],
      default: null
    }
  },
  data() {
    return {
      verifyStatus,
      enumerationStatus
    }
  },
  methods: {
    handleSearch() {
      this.$emit('handleSearch')
    },

    async download() {
      try {
        this.$emit('changLoading', true)
        await offerTemplanteExport()
      } finally {
        this.$emit('changLoading', false)
      }
    },

    async handleOnChange(file) {
      try {
        this.$emit('changLoading', true)
        const formData = new FormData()
        formData.append('file', file.raw)
        formData.append('maxSize', window.JDSupermarketParams.uploadTemplateMaxSize)
        const { code, result } = await uploadExcel(formData)
        if (code !== '0' || !result) return
        this.$message({
          type: 'success',
          message: '导入成功！'
        })
        this.$emit('uploadSuccess', result)
        this.handleSearch()
      } catch (_) {
        this.$emit('uploadSuccess', null)
      } finally {
        this.$emit('changLoading', false)
      }
    },

    async handleCheck() {
      try {
        this.$emit('changLoading', true)
        const { code } = await verification(this.id)
        if (code !== '0') return
        this.$message.success('已对数据进行校验，可点击刷新按钮刷新数据！')
        this.handleSearch()
      } finally {
        this.$emit('changLoading', false)
      }
    },

    async handleDetermineOffer() {
      try {
        if (!this.id) return
        this.$emit('changLoading', true)
        const { code } = await determineOffer(this.id)
        if (code !== '0') return
        this.$message({
          type: 'success',
          message: '确定导入报价成功！'
        })
        bus.$emit('closeTag', this.$route)
      } finally {
        this.$emit('changLoading', false)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.pageHeader {
  padding: 10px 20px;
}

.offer-header {
  padding-bottom: 10px;
  display: flex;
  justify-content: space-between;
  border-bottom: solid #eee 1px;
  .inspect-btn {
    margin-left: 5px;
  }
  .avatar-uploader {
    display: inline-block;
  }
}

.retrieval {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
  .search-item {
    display: flex;
    align-items: center;
  }
  .text-prompt {
    flex: 1;
    color: #888;
  }
}

/deep/ .el-form-item {
  margin: 0 !important;
}

.el-icon-refresh {
  margin: 0 20px 0 10px;
  font-size: 18px;
  line-height: 28px;
  color: #0071ce;
  cursor: pointer;
}
</style>
